import React, { useState, useEffect } from 'react'
import axios from "axios"
import "./index.scss"
import Gift from './img/gift.png'
import Vip from './img/two-member.png'
import { SideBar } from 'antd-mobile'

const Category = () => {
    const [thingList, setThingList] = useState([])
    const [navList, setNavList] = useState([])
    const [activeKey, setActiveKey] = useState('312')
    const [sortTypes, setSortTypes] = useState({
        //升序
        up: {
            class: "sort-up",
            fn: (a, b) => a.template.retailPrice - b.template.retailPrice,
        },
        //降序
        down: {
            class: "sort-down",
            fn: (a, b) => b.template.retailPrice - a.template.retailPrice,
        },
        //默认不排序
        default: {
            class: "sort",
            fn: (a, b) => a,
        },
    },
    )
    // 当前排序
    const [currentSort, setCurrentSort] = useState("default")
    useEffect(() => {
        axios.post("https://srv.hotkidceo.com/appapi/root-ceo-commodity/categoryApi/categoryList", { "isWholeSale": 0, "channelId": null })
            .then(res => {
                setNavList(res.data.data.categoryInfo)
            })
        getCateData('312');
    }, [])

    const getCateData = (activeKey) => {
        axios.post(
            'https://srv.hotkidceo.com/appapi/root-ceo-commodity/categoryApi/commoditiesByCategory', { "ceoStatus": 0, "catKey": activeKey, "page": 1, "pageSize": 1000, "channelId": null, "memberKey": "" }
        ).then(res => {
            console.log(res);
            setThingList(res.data.data.commodityInfo)
        })
    }
    const setActiveKeyFn = (value) => {
        setActiveKey(value);
        //将获取数据放在 setState的第二个参数中，可以获取到最新的state的值
        getCateData(value);

    }
    const onSortChange = () => {
        let nextSort;
        //排序方式的切换
        if (currentSort === "down") nextSort = "up";
        else if (currentSort === "up") nextSort = "default";
        else if (currentSort === "default") nextSort = "down";
        //修改当前排序方式

        setCurrentSort(nextSort)

    }
    return (
        < div className='box' >
            <div className='box_left' >

                <SideBar activeKey={activeKey} onChange={setActiveKeyFn}>
                    {navList.map(item => (
                        <SideBar.Item key={item.code} title={item.displayName} >{item.displayName}</SideBar.Item>
                    ))}
                </SideBar>
            </div >

            <div className='box_right'>
                <div onClick={onSortChange} className={sortTypes[currentSort].class}>
                    <p>价格</p>
                </div>
                <ul>
                    {
                        thingList.sort(sortTypes[currentSort].fn)
                            .map(item => <li key={item.key} className='con'>
                                <div className="picture">
                                    <img alt="es-lint want to get" src={item.template.listImages}></img>
                                </div>
                                <div className='con_right'>
                                    <div>
                                        <p className='text'>{item.name}</p>
                                        <p className='text_2'>{item.template.displayName}</p>
                                    </div>
                                    <img src={Gift} alt="es-lint want to get" className='img_1' />
                                    <div>
                                        <span className='price1'>￥{item.template.origPrice}</span>
                                        <span className='price2'>￥{item.template.supplyPrice}</span>
                                        <img src={Vip} alt="es-lint want to get" className='img_2' />
                                    </div>
                                </div>
                            </li>)
                    }
                </ul>
            </div>
        </div >
    )
}

export default Category
